<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <div id="app">
      <div @click="run">vue的extend</div>
      <bmw></bmw>
    
   </div>
   <div id="benchi"></div>
   <div id="bmw"></div>
   <script src="./vue.js">
   </script>
   <script>
    // Vue.extend() //创建一个组件构造器 创建一个new 实例化的 对象
   

    //配合render 函数使用 
    // Vue.version 返回d当前使用的vue版本操作符
    console.log(Vue.version.split("."),'----vue版本')
     //  Vue.observable //  让一个对象变成响应式的
      const state =Vue.observable({ count: 0 })
        let Car=Vue.extend({
          template:`<div @click='add'>我是构造器${state.count}--模板部分 我是汽车构造 {{msg}}{{age}}</div>`,
          props:["msg","age"],
          data(){
            return {}
          },
          methods:{
            add(){
              console.log(11111)
              state.count=99;
            }
          },
          created(){}
        })

        let benChi=new Car({
          // propsData 是给构造的props传参的
          propsData:{msg:"消息",age:19}
        })
        benChi.$mount("#benchi")

        let bmw=new Car({
          propsData:{msg:"宝马消息",age:20}
        })
        bmw.$mount("#bmw")
        console.log(benChi,"---------")
        

  
 

       new Vue({
        el:"#app",
        data(){
          return {
            
          }
        },
         created(){
     
         },
        // errorCaptured(err){ // 错误捕获的生命周期
        //   console.log(err,"捕获组件的中出现的错误")
        // }
       })
   </script>
</body>
</html>